<head>
	
<style>
body {
	min-width: 520px;
	margin: 0px;
	padding: 0px;
	overflow-x:hidden;
}
table {
	border: 0px;
	margin: 0px;
	padding: 0px;
}
tr {
	color: #333333;
	background-color: #eeeeee;
	height: 68px;
}
tr:hover {
	cursor: hand;
	color: #ffffff;
	background-color: #ff0000;
	border: 1px solid #000000;
}
td.video-thumbnail {
	margin: 0px;
	padding: 0px;
	width: 120px;
	height: 68px;
}
td.video-info {
	vertical-align: top;
	font-family: arial, sans-serif;
	font-size: 10px;
	width: 380px;
	padding: 8px;
	height: 68px;
}
.video-title {
	font-weight: bold;
	font-size: 12px;
	text-decoration: none;
	margin-bottom: 3px;
}
.video-description {
	/* color: #333333; */
	margin: 4px 0 0 0;
	padding: 0;
	font-size: 10px;
}
.video-hit {
	background-color: #fffdea;
}
.video-megahit {
	background-color: #fff7cf;
}
.video-hallfame {
	background-color: #ffe6cf;
}
.badge-hit {
	font-weight: bold;
	padding: 1px;
	color: #ff0000;
	background-color: #ffffff;
}
.badge-megahit {
	font-weight: bold;
	padding: 1px;
	color: #ff0000;
	background-color: #ffffff;
	border: 1px solid #ff0000;
}
.badge-hallfame {
	font-weight: bold;
	padding: 1px;
	color: #e76300;
	background-color: #ffe43d;
	border: 1px solid #e76300;
}
</style>

<script type="text/javascript" src="mootools.js"></script>
<script>
function loadVideos() {
	var videoList = chrome.extension.getBackgroundPage().selectedVideoList;
	if (videoList) {
		for (var i=0; i<videoList.getVideoInfoList().length; i++) {
			
			// Reduce video description to 60 characters
			var videoDescription = videoList.getVideoInfoList()[i].entry.media$group.media$description.$t;
			var videoDescriptionShort = videoDescription.substring(0,60);
			if (videoDescriptionShort.length < videoDescription.length) {
				videoDescription = videoDescriptionShort + " [...]";
			}
			
			var videoURL = "http://www.youtube.com/watch?v=" + videoList.getVideoInfoList()[i].entry.media$group.yt$videoid;
			var videoId = videoList.getVideoInfoList()[i].entry.media$group.yt$videoid.$t;
			var videoViewCount = videoList.getVideoInfoList()[i].entry.yt$statistics.viewCount;
			var videoRow = new Element('tr');

			var hitBadge = "";
			if (videoViewCount > 1000000) {
				hitBadge = "<span class='badge-hit'>YOUTUBE HIT</span> ";
				videoRow.addClass('video-hit');
			}
			if (videoViewCount > 10000000) {
				hitBadge = "<span class='badge-megahit'>YOUTUBE MEGAHIT</span> ";
				videoRow.addClass('video-megahit');
			}
			if (videoViewCount > 30000000) {
				hitBadge = "<span class='badge-hallfame'>YOUTUBE HALL OF FAME</span> ";
				videoRow.addClass('video-hallfame');
			}
			videoRow.onclick = (function(vid) {
				return function(event) {
					chrome.tabs.create({'url': 'http://www.youtube.com/watch?v=' + vid});
					window.close();
				};
			})(videoId);
			videoRow.inject('video-table');
			
			videoRow.innerHTML =
			"<td class='video-thumbnail' style='background:url(" + videoList.getVideoInfoList()[i].entry.media$group.media$thumbnail[0].url + ") no-repeat 0px -11px;'></td>" +
			"<td class='video-info'>" +
			 hitBadge +"<span class='video-title'>" + videoList.getVideoInfoList()[i].entry.title.$t + "</span><br/>" +
			"<div class='video-description'>" + videoDescription + "</div><br/>" +
			"<span class='video-score'><b>Score</b>: " + videoList.getVideoInfoList()[i].entry.gd$rating.average.toPrecision(3) + "</span> | " +
			"<span class='video-views'><b>Views</b>: " + videoViewCount + "</span> " +
			"</td>";
			
		}
	}
}
</script>

</head>
<body onload="loadVideos()">
	<table id="video-table"></table>
</body>
